<template>
    <div>
        <div class="download-box" @click="visible = !visible">
            <a-icon type="download" />
        </div>
        <a-modal title="下载中心" :footer="null" width="60vw" :visible="visible" :confirm-loading="confirmLoading"
            @ok="handleOk" @cancel="handleCancel">
            <a-table rowKey="id" :pagination="pagination" @change="handleTableChange" :columns="columns"
                :data-source="list" handleTableChange>
                <span slot="time" slot-scope="text, record">{{formatTime(record.createTime)}}</span>
                <template slot="size" slot-scope="text, record">
                    <span v-if="record.state == 'Y'">
                        {{ record.fileSize > 1024 ? (record.fileSize / 1024).toFixed(2) +
                        'M'
                        : record.fileSize + 'KB'
                        }}</span>
                    <span v-else>/</span>
                </template>
                <span slot="state" slot-scope="text, record">{{record.status == '1' ? '导出成功' : '导出中'}}</span>

                <template slot="action" slot-scope="text, record">
                    <a-button :disabled="record.status == '0'" @click="downLoad(record.downloadUrl)" type="link">下载
                    </a-button>
                </template>
            </a-table>
        </a-modal>
    </div>
</template>
  
<script>
import moment from 'moment'
import { downList } from '@/api/micromall/storePackage'
const columns = [
    {
        dataIndex: 'downloadPkgName',
        title: '任务名称',

    },
    {
        title: '下载时间',
        dataIndex: 'createTime',
        // scopedSlots: { customRender: 'time' }
    },
    {
        title: '文件大小',
        dataIndex: 'fileSize',
        // scopedSlots: { customRender: 'fileSize' },
    },
    {
        title: '下载状态',
        scopedSlots: { customRender: 'state' },
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
    },
];
export default {
    name: 'FileDown',
    data() {
        return {
            columns,
            list: [],
            confirmLoading: false,
            visible: false,
            pagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30', '40'],
                showTotal: (total, range) => `共 ${total} 条`,
                showSizeChanger: true,
                total: 0
            }
        }
    },
    watch: {
        visible(n) {
            if (n) {
                this.queryFileList()
            }
        }
    },
    computed: {
        formatTime() {
            return function (time) {
                return moment(time).format('YYYY-MM-DD hh:mm:ss')
            }
        }
    },
    methods: {
        handleOk() { },
        handleCancel() {
            this.visible = false
        },

        async downLoad(url) {
            window.open(url)
        },
        handleTableChange(pagination) {
            this.pagination = pagination
            this.queryFileList();
        },
        async queryFileList() {
            const { current = 1, size = 10 } = this.pagination
            const res = await downList({ current, size })
            this.list = res.data.records
            this.pagination.total = res.data.total
        },
    },
}
</script>
  
<style scoped>
.download-box {
    position: fixed;
    right: 30px;
    bottom: 150px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eee;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    display: flex;
    z-index: 9999;
}
</style>
  